<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">我的转售</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		
		<view class="show-list">
			<scroll-view style="width: 100%;height:100%;" enableBackToTop="true" scroll-y @scrolltolower="scrolltolower()">
				<view class="scrollBox">
					<view class="show-list-item" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsDetail(`/pages/detail/myGoodsDetail?id=${item.assetsId}`)">
						<view class="goodsMain">
							<view class="img">
								<image v-if="isImage(item.fileUrl)" class="img" :src="pathImg+item.fileUrl" mode="scaleToFill">
								</image>
								<video v-else class="videoBox" :enable-progress-gesture="false" :src="pathImg+item.fileUrl" muted
									:autoplay="false" :controls="false" loop></video>
								<text>#{{item.sortSn}}</text>
								<view class="item-price"><text class="price">￥</text>{{item.price}}</view>
							</view>
							<view class="names">
								<text>{{item.collName}}</text>
								<image v-if="setImgShow(item) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
								<image v-if="setImgShow(item) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
								<image v-if="setImgShow(item) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view v-if="goodsList.length == 0">
				<view class="noData">
					<image class="noDataImg" src="../../static/noData.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast" ></u-toast>
	</view>
</template>

<script>
	import {
		getMyGoodsList
	} from '../../api/user.js'
	export default {
		data() {
			return {
				goodsList: [],
				// 模态框
				listQuery: {
					page: 1,
					pageSize: 6,
					pages:1,
					total:0,
					castingId:"",
					sellStatus:"",//售卖状态 1售卖中 2排队
					status:1,//0下架1售卖中-1转让中2已转让
				},
			};
		},
		onShow() {
			this.getNftList();
		},
		methods: {
			scrolltolower(){
				if(this.listQuery.pages > this.listQuery.page){
					this.listQuery.page++;
					this.getNftList();
				}else{
					// this.isEnd = true;
				}
			},
			setImgShow(cur){///判断文件类型
				if(cur.metafile.FileType){
					if(cur.metafile.FileType == ".glb"){
						return 3;
					}else if(cur.metafile.FileType == ".mp4"){
						return 2;
					}else{
						return 1;
					}
				}
				return 0;
			},
			getNftList() {
				getMyGoodsList(this.listQuery).then(res => {
					if (res.data.success) {
						let list = res.data.obj.list;
						this.listQuery.pages = res.data.obj.pages;
						if (list.length == 0 || list.length == 1) {
							// this.isEnd = true;
						}
						if (list.length == 0) {
							return
						}
						let newList = list.map((item, index) => {
							// item.labelList = item.label.split(',')
							if(item.metafile){
								item.metafile = JSON.parse(item.metafile);
							}
							return item;
						})
						if (this.listQuery.page == 1) {
							this.goodsList = [...newList]
						} else {
							this.goodsList = [...this.goodsList, ...newList]
						}
					}else{
						
					}
					// this.isEnd = true;
				}).catch(err=>{
					// this.isEnd = true;
				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			// 跳转藏品详情
			goGoodsDetail(url){
				uni.navigateTo({
					url
				})
			},
			back() {
				uni.switchTab({
					url: "/pages/user/user"
				});
			}
		},
		onReachBottom() {
			if(this.listQuery.pages > this.listQuery.page){
				this.listQuery.page++;
				this.getSeriesList();
			}else{
				// this.isEnd = true;
			}
		},
	}
</script>

<style lang="less" scoped>
	page{width: 100%;height: 100%;}
	.con-box {
		height: 100%;
		width: 100%;
		min-height: 100vh;
		padding: 170upx 0upx 0;
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}

		.show-list {
			height: 100%;
			width: 100%;
			padding: 0 30upx;
			.noData{
				position: absolute;
				width: 220upx;
				height: 180upx;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-90%);
				.noDataImg{
					width: 220upx;
					height: 180upx;
				}
			}
			.scrollBox{
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				flex-wrap: wrap;
				.show-list-item {
					width: 50%;
					vertical-align: top;
					margin-bottom: 30upx;
					.goodsMain{
						border-radius: 26upx;
						background-color: #fff;
						padding-bottom: 30upx;
					}
					.names{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20upx;
						padding-top: 16upx;
						image{
							width: 26upx;
						}
						>text{
							display: inline-block;
							flex: 1%;
							padding-right: 16upx;
							font-size: 24upx;
							color: #333;
						}
					}
					.img{
						overflow: hidden;
						border-radius: 26upx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 288upx;
						.item-price{
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 40upx;
							background-color: rgba(255,255,255,0.72);
							text-align: center;
							color: #2C1769;
							font-size: 30upx;
							text{
								font-size: 20upx;
							}
						}
						.videoBox {
							width: 100%;
							display: block;
							height:716upx;
							max-height: 716upx;
							/deep/.uni-video-container{
								background-color: transparent;
							}
						}
						image{
							width: 100%;
						}
						>text{
							width: 182upx;
							height: 34upx;
							position: absolute;
							top: 0;
							left: 50%;
							margin-left: -91upx;
							color: #fff;
							font-size: 20upx;
							display: inline-block;
							background-image: url(../../static/home/title2.png);
							background-size: 100% 100%;
							background-repeat: no-repeat;
							text-align: center;
							line-height: 34upx;
						}
					}
				}
				.show-list-item:nth-child(odd){
					padding-right: 15upx;
				}
				.show-list-item:nth-child(even){
					padding-left: 15upx;
				}
			}
			
		}
		.undercarriage{
			margin-top: 40upx;
			color: #fff;
			.text{
				padding: 20upx 0;
				border-bottom: 1upx solid #f1f1f1;
			}
			.take{
				text-align: center;
				padding: 40upx 0;
			}
			.btn{
				display: flex;
				justify-content: space-between;
				.u-button{
					width: 240upx;
				}
			}
		}
			
	}

	.feedback {
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		display: flex;
		align-items: center;
		font-size: 26upx;
		margin-left: 10upx;
		height: 60upx;
		padding: 0 15upx;
		position: absolute;
		top: 50upx;
		right: 50upx;
	}
	::v-deep .u-modal{
		.u-modal__content__text{
			span{
				display: block !important;
				width: 100%;
				text-align: center;
			}
		}
	}
</style>